<template>
  <div class="page-wrapper">
    <el-card>
      <el-tabs>
        <!-- 放置页签 -->
        <el-tab-pane label="角色管理">
          <!-- 新增角色按钮 -->
          <el-row style="height: 60px">
            <el-button
              size="small"
              type="primary"
              @click="isShowDialog=true"
            >新增角色</el-button>
          </el-row>
          <!-- 表格 -->
          <el-table :data="roleList" border>
            <el-table-column width="80px" prop="index" label="序号" />
            <el-table-column width="150px" label="角色名称" prop="name" />
            <el-table-column label="描述" prop="description" />
            <el-table-column width="250px" label="操作">
              <el-button type="text">分配权限</el-button>
              <el-button type="text">编辑</el-button>
              <el-button type="text">删除</el-button>
            </el-table-column>
          </el-table>
          <!-- 分页组件 -->
          <el-row type="flex" justify="center" class="page-bar">
            <!-- 分页组件 -->
            <el-pagination
              :page-size="pageConfig.pagesize"
              :total="total"
              @current-change="currentChange"
            />
          </el-row>
        </el-tab-pane>
        <!-- 第二标签页 -->
        <el-tab-pane label="公司信息">
          <el-form label-width="120px" style="margin-top: 50px">
            <el-form-item label="公司名称">
              <el-input
                v-model="companyInfo.name"
                disabled
                style="width: 400px"
              />
            </el-form-item>
            <el-form-item label="公司地址">
              <el-input
                v-model="companyInfo.companyAddress"
                disabled
                style="width: 400px"
              />
            </el-form-item>
            <el-form-item label="公司电话">
              <el-input
                v-model="companyInfo.companyPhone"
                disabled
                style="width: 400px"
              />
            </el-form-item>
            <el-form-item label="邮箱">
              <el-input
                v-model="companyInfo.mailbox"
                disabled
                style="width: 400px"
              />
            </el-form-item>
            <el-form-item label="备注">
              <el-input
                v-model="companyInfo.remarks"
                type="textarea"
                :rows="3"
                disabled
                style="width: 400px"
              />
            </el-form-item>
          </el-form>
        </el-tab-pane>
      </el-tabs>
    </el-card>
    <el-dialog title="新增角色" :visible="isShowDialog">
      内容
    </el-dialog>
  </div>
</template>

<script>
import { getCompanyInfo, getRoleList } from '@/api/setting'
export default {
  data() {
    return {
      pageConfig: {
        page: 1,
        pagesize: 2
      },
      companyInfo: {},
      roleList: [],
      total: 0,
      isShowDialog: false
    }
  },
  // 页面进入发送请求
  async created() {
    const companyId = this.$store.state.user.userInfo.companyId
    const res = await getCompanyInfo(companyId)
    // console.log(res)
    this.companyInfo = res

    // 发送请求获取列表数据
    this.loadList()
  },
  methods: {
    currentChange(newPage) {
      console.log(newPage)
      this.pageConfig.page = newPage

      this.loadList()
    },
    async loadList() {
      const res2 = await getRoleList(this.pageConfig)
      console.log(res2)
      this.total = res2.total

      this.roleList = res2.rows.map((item, index) => {
        return {
          ...item,
          // 每个数据对象都要进行映射生成新的，除了原来的所有数据，还要补上计算当前索引
          index: (this.pageConfig.page - 1) * this.pageConfig.pagesize + index + 1
        }
      })
    }
  }
}
</script>

<style>
</style>
